<template>
	<view>
		<view class="chat-content">
			<view class="flex-align">
				<u-avatar src="" shape="square" size="40"></u-avatar>
				<view class="jobercomm">99</view>
			</view>
			<view class="mine flex-align">
				<view class="minecomm">99</view>
				<navigator url="/pages/chit-chat/job-seeker-info/index">
					<u-avatar src="" shape="square" size="40"></u-avatar>
				</navigator>
			</view>
		</view>
		<view class="input-box flex-align">
			<view class="voice flex-align">
				<image class="wave" src="../../../static/wave.png" mode=""></image>
				<u--input placeholder="" border="surround" v-model="value" @change="change"></u--input>
				<image class="smile" src="../../../static/smile.png" mode=""></image>
				<image @click="add" class="add" src="../../../static/add.png" mode=""></image>
			</view>
			<view v-show="swiperShow" class="swiper-scroll">
				<swiper :indicator-dots="true" class="swiper">
					<swiper-item>
						<u-grid :border="true">
							<u-grid-item :customStyle="{width: '25%',height:180+'rpx'}"
								v-for="(item, index) in swiperList1" :index="index" :key="index">
								<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.icon" :size="22"></u-icon> -->
								<image class="icon" :src="item.icon" mode=""></image>
								<text class="grid-text">{{item.title}}</text>
							</u-grid-item>
						</u-grid>
					</swiper-item>
					<swiper-item>
						<u-grid :border="true">
							<u-grid-item :customStyle="{width:'25%',height:180+'rpx'}"
								v-for="(item, index) in swiperList2" :index="index + 9" :key="index">
								<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.icon" :size="22"></u-icon> -->
								<image class="icon" :src="item.icon" mode=""></image>
								<text class="grid-text">{{item.title}}</text>
							</u-grid-item>
						</u-grid>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				swiperShow: false,
				swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'],
				swiperList1: [{
						title: '相册',
						icon: '../../../static/add.png'
					},
					{
						title: '拍摄',
						icon: '../../../static/add.png'
					},
					{
						title: '语音通话',
						icon: 'coupon'
					},
					{
						title: '视频通话',
						icon: 'gift'
					},
					{
						title: '红包',
						icon: '../../../static/add.png'
					},
					{
						title: '转账',
						icon: 'pause-circle'
					},
					{
						title: '位置',
						icon: 'wifi'
					},
					{
						title: '收藏',
						icon: 'email'
					},
				],
				swiperList2: [{
						title: '明信片',
						icon: 'integral'
					},
					{
						title: '文件',
						icon: 'kefu-ermai'
					},
					{
						title: '歌曲',
						icon: 'coupon'
					},
					{
						title: '其他',
						icon: 'gift'
					},
				]
			};
		},
		onLoad() {
			wx.setNavigationBarTitle({
				title: '郭春香'
			})
		},
		methods: {
			add() {
				this.swiperShow = !this.swiperShow
			}
		}
	}
</script>

<style lang="less">
	.contactUs {
		background-color: #ffffff;
		padding: 36rpx 10rpx 22rpx 10rpx;
	}

	.grid-text {
		font-weight: 400;
		font-size: 20rpx;
		color: #8A8A8A;
		line-height: 28rpx;
	}

	::v-deep .u-icon__icon {
		padding: 0 !important;
		margin-bottom: 2rpx;
	}

	.input-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		// height: 104rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -8rpx 16rpx 0rpx rgba(208, 208, 208, 0.3);
		display: flex;
		flex-direction: column;
	}

	.voice {
		width: 100%;
		padding-top: 16px;
		padding-bottom: 16px;
		border-bottom: 1px solid #F5F5F5;
	}

	.chat-content {
		padding: 42rpx 28rpx 0rpx 28rpx;
		// background-color: #8A8A8A;
		height: 100%;
	}

	::v-deep .input-box .u-button {
		width: 132rpx;
		height: 60rpx;
		background: #429CFD;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		flex-shrink: 0;
		margin-left: 20rpx;

		span {
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	::v-deep .input-box .u-input {
		margin: 0rpx 18rpx 0rpx 28rpx;
		width: 100%;
		height: 46rpx;
		background-color: #EFEFEF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.smile,
	.add {
		width: 60rpx;
		height: 60rpx;
	}

	.wave {
		width: 50rpx;
		height: 50rpx;
		margin-left: 18rpx;
	}

	.add {
		margin: 0rpx 24rpx 0rpx 12rpx;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 570rpx;
		height: 916rpx;
		padding: 26rpx 34rpx 24rpx 36rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.permission {
		font-weight: 400;
		font-size: 28rpx;
		color: #6D6D6D;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		margin: 14rpx 0rpx 146rpx 0rpx;

		.private {
			color: #1872FF;
		}
	}

	.reject {
		justify-content: flex-end;
		column-gap: 44rpx;
	}

	::v-deep .reject .u-button {
		padding: 0;
		border: none;
		width: 80rpx;
		height: 46rpx;
		font-weight: 400;
		color: #B8B8B8;
		line-height: 46rpx;
		margin: 0;

		span {
			font-size: 32rpx;
		}

		&::before,
		&::after {
			content: none !important;
		}

		&:nth-child(2) {
			color: #1872FF;
		}
	}

	.minecomm,
	.jobercomm {
		height: 46rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #3D3D3D;
		line-height: 46rpx;
		text-align: left;
		padding: 8rpx 12rpx 8rpx 32rpx;
		background-color: #ffffff;
	}

	.minecomm {
		margin-right: 14rpx;
		border-radius: 16rpx 0rpx 16rpx 16rpx;
	}

	.mine {
		justify-content: flex-end;
	}

	.jobercomm {
		margin-left: 14rpx;
		border-radius: 0rpx 16rpx 16rpx 16rpx;
	}

	.swiper-scroll {
		width: 100%;
		transition: all 0.5s ease;
	}

	.swiper {
		width: 100%;
		height: 430rpx;
		margin-top: 20px;
		margin-bottom: 15px;
	}

	.grid-text {
		font-size: 20rpx;
		color: #515151;
		padding: 10rpx 0 20rpx 0rpx;

		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 7rpx;
	}

	::v-deep .uni-swiper-dot {
		width: 12rpx;
		height: 12rpx;
		background: #D8D8D8;
	}

	::v-deep .uni-swiper-dot-active {
		width: 12rpx;
		height: 12rpx;
		background: #8A8A8A;
	}
</style>